<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>专家库管理</span>
      </div>
    </template>
    
    <div class="search-form">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="formInline.name" placeholder="请输入专家姓名" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.expertPost" placeholder="请输入专家职务" clearable @keyup.enter="onSubmit"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="addExpertInfo">新建</el-button>
      </div>
    </div>

    <div class="table-data" v-loading="loading">
      <el-table
        :data="expertInfoData"
        stripe
        borderresizable
        highlight-hover-row
        show-overflow
        keep-source
        scrollbar-always-on
      >
        <el-table-column
          v-for="(tableItem, tableIndex) in expertInfoTableColumns" :key="tableIndex"
          :prop="tableItem.field"
          :label="tableItem.label"
          :min-width="tableItem.minWidth"
          :formatter="tableItem.formatter"
          :show-overflow-tooltip="tableItem.field != 'expertPic'"
        >
          <template #default="scope" v-if="tableItem.slot">
            <slot :name="tableItem.slot" v-bind="scope">
              <div class="table-item-img">
                <el-image
                  style="width: 200px;"
                  :src="`${systemStore.frontHost}/TpwpExpertStatic/${scope.row.unitId}/${isJsonString(scope.row.expertPic) ? getImagePath(scope.row.expertPic) : scope.row.expertPic}`"
                  fit="cover"
                >
                  <template #error>
                    <div class="image-slot">
                      <el-image style="width: 200px;" src="/images/expert_default.png" fit="cover" />
                    </div>
                  </template>
                </el-image>

                <img src="../../../../assets/images/front/expert_medal.png" alt="" srcset="" class="expert-medal" v-if="scope.row.expertType == '宣讲专家'">
              </div>
            </slot>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          field="opera"
          label="操作"
          min-width="280"
        >
          <template #default="{ row }">
            <el-button
              type="warning"
              link
              @click="expertInfoDetail(row)"
            >查看</el-button>
            <el-button
              type="success"
              link
              @click="addExpertAchievements(row)"
            >新增专家成果</el-button>
            <el-button
              type="success"
              link
              @click="addExpertCourse(row)"
            >新增课程</el-button>
            <el-button
              type="success"
              link
              @click="expertInfoEdit(row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="table-page">
        <el-pagination background layout="prev, pager, next" :total="dataTotal" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" />
      </div>
    </div>
  </el-card>
</template>

<script>
export default { name: "backendExpertInfo" }
</script>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/http/index';
import { useSystemStore } from '@/stores/modules/system.js';
import { checkStatusFormatter, reFileResult, isJsonString } from "@/utils/backend.js"

const systemStore = useSystemStore()

/* 路由 */
const route = useRouter();

onMounted(() => {
  onSubmit()
})

/* 搜索表单 */
const formInline = ref({
  name: "",
  expertPost: "",
})

/* 分页 */
const dataTotal = ref(0)
const pageSize = ref(15)
const currentPage = ref(1)

if(route.currentRoute.value.query.currentPage) {
  currentPage.value = Number(route.currentRoute.value.query.currentPage)
}

/* 切换页码方法 */
const currentChange = (val) => {
  currentPage.value = val
  onSubmit()
}

/* 表格数据加载动画 */
const loading = ref(false)

/* 表格数据 */
const expertInfoData = ref([])

/* 表格字段 */
const expertInfoTableColumns = reactive([
  { field: "name", label: "专家姓名", minWidth: "140" },
  { field: "expertPost", label: "专家职务", minWidth: "200" },
  { field: "expertPic", label: "专家照片", minWidth: "250", slot: "imgView" },
  { field: "expertTitle", label: "专家职称", minWidth: "200" },
  { field: "expertType", label: "专家类别", minWidth: "200" },
  { field: "researchDirection", label: "研究方向", minWidth: "160" },
  { field: "researchKeyword", label: "研究关键词", minWidth: "160" },
  { field: "unit", label: "机构", minWidth: "170" },
  { field: "totalAchievements", label: "成果总量", minWidth: "120" },
  /* { field: "timesCited", label: "被引频次", minWidth: "120" }, */
  { field: "hIndex", label: "H指数", minWidth: "120" },
  { field: "gIndex", label: "G指数", minWidth: "120" },
  { field: "expertDesp", label: "简介", minWidth: "200" },
  /* { field: "checkStatus", label: "审核状态", minWidth: "120", formatter: checkStatusFormatter }, */
  { field: "subject", label: "主学科", minWidth: "120" },
  { field: "achievementCoreCount", label: "核心期刊发文数", minWidth: "140" },
  { field: "citedCount", label: "被引频次", minWidth: "120" },
  { field: "downloadCount", label: "下载频次", minWidth: "200" },
  { field: "unitId", label: "标准一级代码", minWidth: "200" },
])

/* 列表筛选 */
const onSubmit = () => {
  loading.value = true
  let params = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
  }
  let dfi = {
    Logic: 0,
    Filters: []
  }

  for (let k in formInline.value){
    if(formInline.value[k]){
      dfi.Filters.push({
        Field: k,
        Operator: 0,
        Value: formInline.value[k]
      })
    }
  }

  if(dfi.Filters.length){
    params.dfi = dfi
  }
  http.$POST("/TheoryStudyM/GetExpertInfoList", params).then(res => {
    loading.value = false
    if (res.isError) return
    expertInfoData.value = res.result.dataLst
    dataTotal.value = res.result.countAll
  }).catch(err => {
    loading.value = false
    ElMessage.warning("查询失败，请重试")
  })
}

/* 新建 */
const addExpertInfo = () => {
  route.push({
    path: "/backend/expert-info/add",
    query: { type: 'add' }
  })
}

/* 编辑 */
const expertInfoEdit = (row) => {
  route.push({
    path: "/backend/expert-info/add",
    query: { id: row.id, type: 'edit', currentPage: currentPage.value }
  })
}

/* 查看 */
const expertInfoDetail = (row) => {
  let { href } = route.resolve({
    path: "/backend/expert-info/detail",
    query: { id: row.id, currentPage: currentPage.value }
  })
  window.open(href, "_blank")
}

/* 点击新建专家成果 */
const addExpertAchievements = (row) => {
  route.push({
    path: "/backend/expert-achievements/add",
    query: { type: 'add', expertId: row.id }
  })
}

/* 点击新建课程 */
const addExpertCourse = (row) => {
  route.push({
    path: "/backend/publicize-course/add",
    query: { type: 'add', expertId: row.id }
  })
}

/* 处理图片路径 */
const getImagePath = (val) => {
  let str = ""
  let file = JSON.parse(val)

  if(!file.filePathArray) return str

  if(file.filePathArray.length == 1) {
    str = file.filePathArray[0].CompleteFilePath.substring(1)
  }
  return str
}
</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
:deep(.table-item-img) {
  position: relative;
}
.expert-medal{
  position: absolute;
  right: 0;
  bottom: 5px;
  z-index: 999;
}
</style>